/* Global Styles */
      body {
          font-family: 'Poppins', sans-serif;
          background-color: #600b0b;
          color: #fff;
          margin: 0;
          padding: 20px;
      }

      header {
          background: linear-gradient(90deg, #6a0000, #b22222);
          color: white;
          padding: 10px 0;
          text-align: center;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }

      header a#logo img {
          height: 50px;
      }

      /* Layout */
      .main-content {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-top: 30px;
      }

      /* Form Container as Table */
      .form-container {
          width: 50%;
          background: #b22222;
          border-radius: 8px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          padding: 20px;
      }

      .form-container table {
          width: 100%;
          border-collapse: collapse;
      }

      .form-container table th,
      .form-container table td {
          border: 1px solid #fff;
          padding: 10px;
          text-align: left;
      }

      .form-container table th {
          background-color: #6a0000;
          color: white;
          text-transform: uppercase;
      }

      .form-container input[type="file"] {
          margin-top: 10px;
          margin-bottom: 15px;
      }

      .form-container button {
          display: block;
          margin: 0 auto;
          padding: 10px 20px;
          background-color: #000;
          border: none;
          color: white;
          font-size: 1rem;
          border-radius: 25px;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }

      .form-container button:hover {
          background-color: #28a745;
      }

      /* User Panel */
      .user-panel {
          width: 30%;
          background: #6a0000;
          color: white;
          border-radius: 8px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          padding: 20px;
          text-align: center;
      }

      .user-panel img {
          border: 3px solid #b22222;
          border-radius: 50%;
          width: 128px;
          height: 128px;
      }

      .user-panel h4 {
          margin: 15px 0 5px;
      }

      .user-panel button {
          background: white;
          color: #8b0000;
          border: 2px solid #8b0000;
          padding: 10px 20px;
          border-radius: 25px;
          font-size: 1rem;
          cursor: pointer;
          transition: 0.3s ease;
      }

      .user-panel button:hover {
          background: #8b0000;
          color: white;
      }

      /* Hat Shop */
      .hat-item {
          display: inline-block;
          margin: 10px;
          text-align: center;
          width: 80px;
      }
      

      .hat-item img {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          margin-bottom: 5px;
      }

      .hat-item button {
          background: #28a745;
          border: none;
          color: white;
          padding: 5px 10px;
          border-radius: 5px;
          cursor: pointer;
      }

      .hat-item button:hover {
          background: #218838;
      }

      .yellow-text {
          color: yellow;
      }

      .hat-shop-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        margin: 30px 0 40px 0;
      }
      .hat-card {
        background: linear-gradient(135deg, #b22222 60%, #6a0000 100%);
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        padding: 18px 16px 14px 16px;
        width: 140px;
        min-height: 220px;
        text-align: center;
        transition: transform 0.18s, box-shadow 0.18s;
        position: relative;
        border: 2px solid #fff2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: visible;
        word-break: break-word;
        z-index: 1;
      }
      .hat-card.vip {
        background: linear-gradient(135deg,rgb(60, 114, 35) 0%, #ffa751 100%);
        border: 2.5px solid #ff00cc;
        box-shadow: 0 0 24px 6px #ff00cc99, 0 8px 24px rgba(0,0,0,0.35);
        animation: vip-glow 1.2s infinite alternate;
      }
      @keyframes vip-glow {
        0% { box-shadow: 0 0 24px 6px #ff00cc99, 0 8px 24px rgba(0,0,0,0.35); }
        100% { box-shadow: 0 0 36px 12px #ffe259cc, 0 8px 32px #ff00cc99; }
      }
      .hat-card img {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        margin-bottom: 8px;
        background: #fff3;
        box-shadow: 0 2px 8px #0002;
      }
      .hat-card .hat-name {
        font-weight: 700;
        font-size: 1.12em;
        margin-bottom: 6px;
        color: #fffbe7;
        text-shadow: 0 2px 8px #000, 0 0 2px #ff0, 0 0 8px #000a;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;

        z-index: 2;
        position: relative;
        background: linear-gradient(90deg,rgba(0,0,0,0.25),rgba(0,0,0,0.12));
        border-radius: 6px;
        padding: 2px 4px;
        box-shadow: 0 2px 8px #0004;
      }
      .hat-card.vip .hat-name {
        color: #ff00cc;
        text-shadow: 0 2px 8px #fff, 0 0 2px #ff0, 0 0 8px #ff00cc;
        background: linear-gradient(90deg,rgba(255,255,255,0.18),rgba(255,0,204,0.18));
      }
      .hat-card .hat-price {
        color: #ffd700;
        font-weight: 500;
        margin-bottom: 10px;
        font-size: 1em;
        min-height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
      .hat-card .buy-btn {
        background: linear-gradient(90deg, #ffd700 60%, #ffb300 100%);
        color: #8b0000;
        border: none;
        border-radius: 20px;
        padding: 7px 18px;
        font-weight: 600;
        font-size: 1em;
        cursor: pointer;
        box-shadow: 0 2px 8px #0002;
        transition: background 0.18s, color 0.18s;
        margin-top: auto;
      }
      .hat-card .buy-btn:hover {
        background: linear-gradient(90deg, #ffb300 60%, #ffd700 100%);
        color: #fff;
      }
      .hat-card .vip-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: linear-gradient(90deg, #ff00cc 0%, #ffe259 100%);
        color: #fff;
        font-weight: bold;
        font-size: 0.95em;
        padding: 2px 10px;
        border-radius: 12px;
        box-shadow: 0 2px 8px #ff00cc55;
        letter-spacing: 1px;
        z-index: 2;
        animation: vip-badge-glow 1.2s infinite alternate;
      }
      @keyframes vip-badge-glow {
        0% { box-shadow: 0 2px 8px #ff00cc55; }
        100% { box-shadow: 0 2px 16px #ffe259cc; }
      }